<!-- 用户编辑弹窗 -->
<template>
  <ele-modal width="720px"
             :visible="visible"
             :append-to-body="true"
             :close-on-click-modal="true"
             custom-class="ele-dialog-form"
             :title="'费率设置'"
             @update:visible="updateVisible">
    <el-form ref="form"
             :model="form"
             :rules="rules">
      <el-row :gutter="0">
        <el-col v-bind="styleResponsive ? { sm: 24 } : { span: 24 }">

          <el-form-item prop="handlingCharge"
                        class="delInput">
            <div>注意:[请认真分佣比例 如不分佣，则不用填!一旦人驻成功
              ，不支持修改分佣比例!]</div>

            <el-input v-model="form.handlingCharge"
                      placeholder="输入的费率为千分之几 例如:0.006 在输入框设置为6"
                      step="0.01"
                      type="number"
                      clearable />
          </el-form-item>

        </el-col>

      </el-row>
    </el-form>
    <template v-slot:footer>
      <el-button @click="updateVisible(false)">取消</el-button>
      <el-button type="primary"
                 :loading="loading"
                 @click="save">
        保存
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
import { settingsHandlingCharge } from '@/api/douApi/index'
import { emailReg, phoneReg } from 'ele-admin';
import RoleSelect from './role-select.vue';
import ActivityEdit from './activity-edit.vue';
import { addUser, updateUser, checkExistence } from '@/api/oem';
import { JSEncrypt } from "jsencrypt";

export default {
  components: { RoleSelect, ActivityEdit },
  props: {
    // 代理类型
    typeList: Array,
    // 进件id
    id: String,
    // 弹窗是否打开
    visible: Boolean,
    // 修改回显的数据
    data: Object
  },
  data () {
    const defaultForm = {
      handlingCharge: '',
      id: ''
    };
    return {
      defaultForm,
      // 表单数据
      form: { ...defaultForm },
      // 表单验证规则
      rules: {
        handlingCharge: [
          { required: true, message: '请填写分佣比例', trigger: 'blur' },
        ],
      },
      // 提交状态
      loading: false,

    };
  },
  computed: {
    // 是否开启响应式布局
    styleResponsive () {
      return this.$store.state.theme.styleResponsive;
    }
  },
  methods: {
    /* 保存编辑 */
    save () {
      this.$refs.form.validate(async (valid) => {
        if (!valid) {
          return false;
        }
        this.loading = true;
        console.log(this.form)

        const res = await settingsHandlingCharge(this.form)
        console.log(res)
        if (res.code == 2000) {
          this.$message.success(res.msg)
        } else {
          this.$message(res.msg)
        }
        this.loading = false
        this.updateVisible(false)
        this.$emit('done');

      });
    },
    /* 更新visible */
    updateVisible (value) {
      this.$emit('update:visible', value);
    }
  },
  watch: {
    id: {
      handler: function (newVal) {
        console.log('Props changed: ', newVal);
        this.form.id = newVal;
      },
      immediate: true
    }
  }
};
</script>

<style scoped lang="less">
/*隐藏input（type=number)右边的小箭头*/
/deep/.delInput input::-webkit-outer-spin-button,
/deep/.delInput input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
/deep/.delInput input[type='number'] {
  -moz-appearance: textfield;
}
</style>
